import React, { useState } from 'react';
import {
  PageContainer,
} from '@ant-design/pro-components';
import { Button, Form, Input, Select, DatePicker } from 'antd';
import LeftTable from './leftTable'
import RightTable from './rightTable'
import Draws from './draws'
type LayoutType = Parameters<typeof Form>[0]['layout'];
const { RangePicker } = DatePicker;
import { getFormatDate } from '@/utils/index'


const Index: React.FC = () => {

  let ChildRef = React.createRef();
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState<LayoutType>('inline');

  const [defaultValue, setDefaultValue] = useState<any>(getFormatDate(1))

  const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
    setFormLayout(layout);
  };



  const handleChange = (value: string) => {
    const fT = getFormatDate(value)
    setDefaultValue(fT)
  };
  const showDrawer = () => {
    ChildRef.current.showDrawer()
  };


  return (
    <PageContainer>
      <Form
        layout={formLayout}
        form={form}
        initialValues={{ layout: formLayout }}
        onValuesChange={onFormLayoutChange}
        style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
      >
        <Form.Item style={{marginBottom: '6px'}} label="">
          <div style={{display: 'flex',}}>
            <Select
              defaultValue="1"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                { value: '1', label: '今天' },
                { value: '2', label: '昨天' },
                { value: '3', label: '本月' },
                { value: '4', label: '上月' },
                { value: '5', label: '今年' },
              ]}
            />
            <RangePicker value={defaultValue} />
          </div>
        </Form.Item>
        <Form.Item style={{marginBottom: '6px'}} label="患者">
          <div style={{display: 'flex'}}>
            <Input placeholder="请输入姓名/就诊号" />
            <Button type="primary">读卡</Button>
          </div>
        </Form.Item>
        <Form.Item style={{marginBottom: '6px'}} label="就诊类型">
          <div style={{display: 'flex'}}>
            <Input placeholder="请输入就诊类型" />
          </div>
        </Form.Item>
        <Form.Item style={{marginBottom: '6px'}} label="标本状态">
          <Select
            defaultValue="1"
            style={{ width: 120 }}
            options={[
              { value: '1', label: '全部' },
              { value: '2', label: '已核收' },
              { value: '3', label: '已作废' },
              { value: '4', label: '已采样' },
            ]}
          />
        </Form.Item>
        <Form.Item style={{marginBottom: '6px'}} label="采集确认">
          <Select
            defaultValue="1"
            style={{ width: 120 }}
            options={[
              { value: '1', label: '未确认' },
              { value: '2', label: '已确认' },
            ]}
          />
        </Form.Item>

        <Form.Item style={{marginBottom: '6px'}}>
          <Button type="primary">查询</Button>
          <Button type="primary" style={{marginLeft: '5px'}}>重置</Button>
        </Form.Item>
      </Form>

      <div style={{display: 'flex',justifyContent: 'space-between'}}>
        <div></div>
        <div>
          <Button type="primary">打印单张条码</Button>
          <Button type="primary" style={{marginLeft: '5px'}} onClick={showDrawer}>检验申请</Button>
          <Button type="primary" style={{marginLeft: '5px'}}>新增患者</Button>
          <Button type="primary" style={{marginLeft: '5px'}}>批量作废</Button>
        </div>
      </div>

      <div style={{marginTop: '8px',display: 'flex'}}>
        <div style={{width: '59%'}}>
          <LeftTable />
        </div>
        <div style={{width: '39%'}}>
          <RightTable />
        </div>
      </div>
      <Draws onRef={ChildRef}/>
    </PageContainer>
  )
}

export default Index;
